<!--
 * @Date: 2022-04-07 18:15:48
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-18 22:16:48
 * @FilePath: \weibovue\src\views\Regsiter\index.vue
 * @Description: 注册组件
-->
<template>
  <div class="registerContainer">
    <ValidateBox type="注册">
      <template v-slot:validateCtx>
        <el-form
          :rules="rules"
          ref="ruleFormRef"
          status-icon
          label-width="120px"
          class="demo-ruleForm"
          :model="ruleForm"
        >
          <el-form-item label="用户名:" label-width="80px" prop="userName">
            <el-input
              type="text"
              autocomplete="off"
              v-model="ruleForm.userName"
            />
          </el-form-item>
          <el-form-item label="密码:" label-width="80px" prop="password">
            <el-input
              type="password"
              autocomplete="off"
              v-model="ruleForm.password"
            />
          </el-form-item>
          <el-form-item
            label="确认密码:"
            label-width="80px"
            prop="confirmPassword"
          >
            <el-input
              type="password"
              autocomplete="off"
              v-model="ruleForm.confirmPassword"
            />
          </el-form-item>
          <el-form-item label="昵称:" label-width="80px" prop="nickName">
            <el-input
              type="text"
              autocomplete="off"
              v-model="ruleForm.nickName"
            />
          </el-form-item>
          <el-form-item label="性别:" label-width="80px" prop="nickName">
            <el-radio v-model="ruleForm.gender" label="1">男</el-radio>
            <el-radio v-model="ruleForm.gender" label="0">女</el-radio>
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:header>
        <h1 class="Header">注册</h1>
      </template>
      <template v-slot:submitBtn>
        <button @click.prevent="loginSubmit(ruleFormRef)" class="submitBtn">
          注册
        </button>
      </template>
    </ValidateBox>
  </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, reactive, ref, watch } from "vue";
import type { FormInstance } from "element-plus";
import { validateVPassword, validateCheakNickName } from "../../utils/validate";
import ValidateBox from "../../components/ValidateBox.vue";
import { UserData } from "../../api/types";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();
//全局接口
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
//用户名校验
const validateUserName = (rule: any, value: string, callback: any) => {
  if (value == "") callback(new Error("不能为空!"));
  else if (validateCheakNickName(value)) {
    callback(new Error("2到16位(字母/数字/下划线)"));
  } else {
    callback();
  }
};
//昵称校验
const validateNickName = (rule: any, value: string, callback: any) => {
  if (value == "") callback(new Error("不能为空!"));
  else if (value.length > 12) {
    callback(new Error("昵称长度不能大于12位!"));
  } else {
    callback();
  }
};
//用户密码校验
const validatePassword = (rule: any, value: string, callback: any) => {
  if (value == "") callback(new Error("密码不能为空!"));
  else if (validateVPassword(value)) {
    callback(new Error("格式为6-20位，包含大小写字母和数字"));
  } else {
    callback();
  }
};
//密码确认校验
const validateconfirmPassword = (rule: any, value: string, callback: any) => {
  if (value == "") callback(new Error("确认密码不能为空!"));
  else if (ruleForm.password !== ruleForm.confirmPassword) {
    callback(new Error("两次密码输入不一致!"));
  } else {
    callback();
  }
};
//表单dom
const ruleFormRef = ref<FormInstance>();
//表单绑定数据
const rules = reactive({
  userName: [{ validator: validateUserName, trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
  confirmPassword: [{ validator: validateconfirmPassword, trigger: "blur" }],
  nickName: [{ validator: validateNickName, trigger: "blur" }],
});
//表单绑定数据
const ruleForm = reactive({
  userName: "",
  password: "",
  //确认密码
  confirmPassword: "",
  nickName: "",
  gender: "3", //默认保密
  //后端判断使用
  type: "register",
});
//注册请求
const register = async (data: UserData) => {
  const res = await $api.user.reqRegister(data);
  // console.log(res);
  if (res.code == 200) {
    router.push({ name: "Login" });
  }
};
//表单提交
const loginSubmit = (formEl: FormInstance | undefined) => {
  // console.log(store.state);

  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const { userName, password, gender, type, nickName } = ruleForm;
      register({
        userName,
        password,
        gender,
        type,
        nickName,
      });
    } else {
      // console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="less" scoped>
.registerContainer {
  height: 50vh;
  display: flex;
  justify-content: center;
  margin-top: 100px;

  .submitBtn {
    width: 100px;
    border: 0;
    background-color: #add8e6;
    color: #ff8200;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
  }
  .Header {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
